<template>
  <div>
    <div style="overflow: hidden">

      <el-select
        style="float: left;width: 300px;padding: 5px"
        v-model="optionsOwnerUserId"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="负责人"
        :remote-method="getOwnerUserInfo"
        :loading="loading">
        <el-option
          v-for="(item,index) in owner_user_info"
          :key="index"
          :label="item.username"
          :value="item.id">
        </el-option>
      </el-select>

      <!--自动化数据-->
      <el-select
        style="float: left;width: 300px;padding: 5px"
        v-model="optionsAutomatedTaskId"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入自动化标题"
        :remote-method="get_automated_task_info"
        :loading="loading">
        <el-option
          v-for="(item,index) in automated_task_info"
          :key="index"
          :label="item.title"
          :value="item.id">
        </el-option>
      </el-select>

      <el-select style="float: left;padding: 5px" v-model="status" placeholder="请选择类型">
        <el-option
          v-for="(item,index) in optionsAutomated"
          :key="index"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>

      <div class="block" style="float: left;padding: 5px;">
        <el-date-picker
          disabled
          v-model="startEndTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <div class="block" style="float: left;padding: 5px;">
        <el-date-picker
          v-model="weeksTime"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周">
        </el-date-picker>
      </div>

      <div style="float: left;padding: 5px">
        <el-button type="primary" plain @click="createReport()">生成报告</el-button>
      </div>
    </div>

    <!--<baseEcharts :id="'weeks1'" v-if="is_show" :data="option" style="height:600px;"></baseEcharts>-->
    <baseEcharts :id="'weeks2'" v-if="is_show" :data="option3" style="height:350px;"></baseEcharts>
    <baseEcharts :id="'weeks3'" v-if="is_show" :data="option2" style="height:350px;"></baseEcharts>

  </div>
</template>

<script>
  import baseEcharts from './baseEcharts.vue'

  export default {
    // name: "reportWeeks",
    data() {
      return {
        status: 2,
        // choices设置
        optionsAutomated: [],  // 存储CommonChoices实际数据的列表
        is_show: false,

        startEndTime: [],  // 开始结束时间
        weeksTime: '',  // 周

        id: 'myReportWeeks',
        ChartLineGraph: null,

        // 编辑和添加选中的数据id
        loading: false,
        optionsAutomatedTaskId: [],
        optionsOwnerUserId: [],

        owner_user_info: [],  // 记录所有者
        automated_task_info: [],  // 自动化明细

        // 数据设置
        ListDataURL: this.$http.TestReportURL,  // 表格列表数据获取
        tableData: [],  // 阿贾克斯获取的初始数据

        weeks_day_list: [], // 周的日期列表

        option: {
          title: {},
          legend: {},
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          dataset: {
            source: [
              ['product', '星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',],
              ['用例总数',],
              ['步骤总数',],
              ['执行用例数',],
              ['执行步骤数',],
              ['用例失败数',],
              ['步骤失败数',],
              ['用例未执行数',],
              ['步骤未执行数',],
            ]
          },

          xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
          ],
          yAxis: [
            {gridIndex: 0},
            {gridIndex: 1}
          ],
          grid: [
            {bottom: '55%'},
            {top: '55%'}
          ],
          series: [
            // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
          ]
        },

        // 适用于单次任务测试
        option2: {
          title: {},
          legend: {},
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            data: []
          },
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: []
        },

        option3: {
          title: {},
          legend: {},
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            data: []
          },
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: []
        },

      }
    },
    created() {
      // 发送啊假克丝请求
      this.optionsAutomated = this.getChoices.automated;
      this.setOptions();
      this.get_weeks_day_list();
      this.optionsOwnerUserId[0] = this.getUserInfo.id;
      this.getOwnerUserInfo(this.getUserInfo.username);
      this.createReport();
    },
    methods: {
      setOptions() {
        let options = [this.optionsAutomated];
        options.forEach(lis => {
          lis.unshift({'id': null, 'value': '请选择状态'})
        })
      },

      createReport() {
        this.is_show = false;
        let queryData = {
          'owner_user': this.optionsOwnerUserId[0],
          'create_time__gte': this.startEndTime[0], // 大于等于
          'create_time__lte': this.startEndTime[1],   // 小于
          'automated_task': this.optionsAutomatedTaskId ? this.optionsAutomatedTaskId[0] : null,
          'status': this.status,
          'report_status': 'report_weeks',
        };
        let newQueryData = {};
        for (let key in queryData) {
          if (queryData[key]) {
            newQueryData[key] = queryData[key];
          }
        }
        this.$http.getApiFunc(this.$http.addApiStatus)(this.ListDataURL, newQueryData)
          .then(res => {
            if (res.data.status) {
              this.$alert(res.data.msg, '提示', {
                confirmButtonText: '确定'
              });
              this.tableData = []
            } else {
              this.tableData = res.data.data;
              this.is_show = true;
            }

          })
          .catch(err => {
            console.log(err);
          })
      },

      //  按项目名称搜索的函数
      inputFunc() {
        this.$myTool.inputFunc(this)
      },

      getOwnerUserInfo(query) {
        this.$myTool.getObjList(this, this.$http.accountURL, this.owner_user_info, query)
      },

      // 自动化数据获取
      get_automated_task_info(query) {
        this.$myTool.getObjList(this, this.$http.AutomatedTaskURL, this.automated_task_info, query)
      },

      // 获取周的日期列表
      get_weeks_day_list() {
        let startDate = new Date();
        startDate.setDate(startDate.getDate() - startDate.getDay());
        let endDate = new Date();
        endDate.setDate(startDate.getDate() + 7);
        this.startEndTime[0] = this.$echarts.format.formatTime('yyyy-MM-dd', startDate);
        this.startEndTime[1] = this.$echarts.format.formatTime('yyyy-MM-dd', endDate);
        while (startDate < endDate) {
          this.weeks_day_list.push(this.$echarts.format.formatTime('yyyy-MM-dd', startDate));
          startDate.setDate(startDate.getDate() + 1);
        }
        console.log(this.weeks_day_list)
      },

      get_option2() {
        let option = this.option2;
        let xNameList = ['用例总数', '步骤总数', '执行用例数', '执行步骤数', '用例失败数', '步骤失败数', '用例未执行数', '步骤未执行数'];
        let field_all_list = ['cases_sum', 'cases_detail_sum', 'cases_execute_sum', 'cases_detail_execute_sum', 'cases_failure_sum', 'cases_detail_failure_sum', 'cases_not_execute_sum', 'cases_detail_not_execute_sum'];
        let weeks_list = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',];
        option.xAxis.data = xNameList;
        option.title={text: '按类型统计'};
        for (let i = 0; i < weeks_list.length; i++) {
          let week = weeks_list[i];
          option.series[i] = {name:week,type:'bar',data:[]};
          let weeks_day = this.weeks_day_list[i];
          let item = this.tableData[weeks_day] ? this.tableData[weeks_day] : null;
          for (let j = 0; j < field_all_list.length; j++) {
            let field = field_all_list[j];
            if (item) {
              option.series[i].data.push(item[field]);
            }else {
              option.series[i].data.push(0);
            }
          }
        }
      },

      get_option3() {
        let option = this.option3;
        let xNameList = ['用例总数', '步骤总数', '执行用例数', '执行步骤数', '用例失败数', '步骤失败数', '用例未执行数', '步骤未执行数'];
        let field_all_list = ['cases_sum', 'cases_detail_sum', 'cases_execute_sum', 'cases_detail_execute_sum', 'cases_failure_sum', 'cases_detail_failure_sum', 'cases_not_execute_sum', 'cases_detail_not_execute_sum'];
        let weeks_list = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',];
        option.xAxis.data = weeks_list;
        option.title={text: '按星期几统计'};
        for (let i = 0; i < xNameList.length; i++) {
          let xName = xNameList[i];
          option.series[i] = {name:xName,type:'bar',data:[]}; // 存放的是每格中的一列
          let field = field_all_list[i];
          for (let j = 0; j < weeks_list.length; j++) {
            let weeks_day = this.weeks_day_list[j];
            let item = this.tableData[weeks_day] ? this.tableData[weeks_day] : null;
            if (item) {
              option.series[i].data.push(item[field]);
            }else {
              option.series[i].data.push(0);
            }
          }
        }
      },
    },

    components: {
      baseEcharts
    },

    watch: {
      optionsAutomatedTaskId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
      },

      optionsOwnerUserId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
      },

      tableData: function (value) {
        let field_all_list = ['cases_sum', 'cases_detail_sum', 'cases_execute_sum', 'cases_detail_execute_sum', 'cases_failure_sum', 'cases_detail_failure_sum', 'cases_not_execute_sum', 'cases_detail_not_execute_sum'];
        this.option.title = {'text': '按周统计'};
        for (let i = 0; i < 7; i++) {
          let weeks_day = this.weeks_day_list[i];
          let item = this.tableData[weeks_day] ? this.tableData[weeks_day] : null;
          for (let j = 0; j < field_all_list.length; j++) {
            let field = field_all_list[j];
            this.option.dataset.source[j + 1][i + 1] = item ? item[field] : 0;
          }
        }
        this.get_option2();
        this.get_option3();
      },

      weeksTime: function (value) {
        this.startEndTime = [];
        if (value) {
          value.setDate(value.getDate() - 1);
          this.startEndTime[0] = value;
          let oldDate = this.$echarts.format.formatTime('yyyy-MM-dd', value);
          let newDate = this.$echarts.number.parseDate(oldDate);
          newDate.setDate(newDate.getDate() + 7);
          this.startEndTime[1] = newDate;
        }
      }
    },
    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      },
      getUserInfo() {
        return this.$store.state.userInfo
      }
    },
  }
</script>

<style scoped>
  .paging {
    padding-top: 20px;
  }

  .input-data {
    float: left;
    width: 200px;
    padding: 5px 5px;
  }

  .mytable {
    /*width: 120px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
